<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      class="elMenu"
    >
      <div style="font-size: 30px; position: relative; top: 20px">
        最新MV
        <el-icon style="font-size: 20px; position: relative; top: 3px"
          ><VideoCamera
        /></el-icon>
      </div>

      <div class="flex-grow" />
      <el-menu-item index="2-1" @click="getVideoNewestFun('内地')">内地</el-menu-item>
      <el-menu-item index="2-2" @click="getVideoNewestFun('港台')">港台</el-menu-item>
      <el-menu-item index="2-3" @click="getVideoNewestFun('欧美')">欧美</el-menu-item>
      <el-menu-item index="2-4" @click="getVideoNewestFun('日本')">日本</el-menu-item>
      <el-menu-item index="2-5" @click="getVideoNewestFun('韩国')">韩国</el-menu-item>
    </el-menu>

    <div class="NewMV" v-loading="loading1">
      <div v-for="item in newestTableData" class="MVDiv">
        <img :src="item.picUrl" alt="" class="img" @click="toMVPlayPage(item.id)" />
        <p style="font-size: 20px">{{ item.name }}</p>
        <!-- <p>{{ item.artist }}</p> -->
        <span v-for="i in item.artist" class="artistName" @click="toSingerPage(i.id)">
          {{ i.name + "     " }}
        </span>
      </div>
    </div>

    <div class="rankDiv" v-loading="loading2">
      <p style="font-size: 30px; margin: 10px 10px 10px; font-weight: bold">排行榜</p>
      <div v-for="item in rankData" class="MVDiv">
        <img :src="item.picUrl" alt="" class="img" @click="toMVPlayPage(item.id)" />
        <p style="font-size: 20px">
          <span style="color: darkorange">{{ item.rankNum }}</span> {{ item.name }}
        </p>
      </div>
    </div>

    <div class="wyProDiv" v-loading="loading3">
      <p style="font-size: 30px; margin: 10px 10px 10px; font-weight: bold">网易出品</p>
      <div v-for="item in wyProData" class="MVDiv">
        <img :src="item.picUrl" alt="" class="img" @click="toMVPlayPage(item.id)" />
        <p style="font-size: 20px">{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { getVideoNewest, wyProductMV, mvRanking } from "@/service/video";
import { storage } from "@/stores/storage";
import router from "../router";
import { getArtistNames } from "../utils/practicalFun";
export default defineComponent({
  mounted() {
    this.getVideoNewestFun();
    this.getWyProductMVFun();
    this.getMVRankingFun();
  },
  setup() {
    const store = storage();
    // const {songListId} = storeToRefs(store)
    let newestTableData = ref([]);
    let wyProData = ref([]);
    let rankData = ref([]);
    const loading1 = ref(true);
    const loading2 = ref(true);
    const loading3 = ref(true);

    const activeIndex = ref("1");
    function getVideoNewestFun(area) {
      getVideoNewest(area)
        .then((res) => {
          let data = res.data.data;
          if (data) {
            for (let i = 0; i < data.length; i++) {
              newestTableData.value[i] = {};
              newestTableData.value[i].name = data[i].name;
              newestTableData.value[i].picUrl = data[i].cover;
              newestTableData.value[i].id = data[i].id;
              newestTableData.value[i].artist = getArtistNames(data[i].artists);
            }
            loading1.value = false;
          }
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }

    function getMVRankingFun() {
      mvRanking()
        .then((res) => {
          if (res.status === 200 && res.data.code === 200) {
            let data = res.data.data;
            for (let i = 0; i < data.length; i++) {
              rankData.value[i] = {};
              rankData.value[i].name = data[i].name;

              rankData.value[i].picUrl = data[i].cover;
              rankData.value[i].id = data[i].mv.id;
              rankData.value[i].rankNum = i + 1;
            }
            loading2.value = false;
          }
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function getWyProductMVFun() {
      wyProductMV()
        .then((res) => {
          let data = res.data.data;
          if (data) {
            for (let i = 0; i < data.length; i++) {
              wyProData.value[i] = {};
              wyProData.value[i].name = data[i].name;
              wyProData.value[i].picUrl = data[i].cover;
              wyProData.value[i].id = data[i].id;
            }
            loading3.value = false;
          }
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }
    function toMVPlayPage(id) {
      store.setMVId(id);
      router.push({
        path: "/mvplay",
      });
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }

    return {
      getVideoNewestFun,
      getWyProductMVFun,
      toMVPlayPage,
      getMVRankingFun,
      toSingerPage,
      activeIndex,
      newestTableData,
      wyProData,
      rankData,
      loading1,
      loading2,
      loading3,
    };
  },
});
</script>

<style scoped>
.NewMV {
  height: 440px;
}
.MVDiv {
  width: 280px;
  height: 200px;
  float: left;
  margin: 10px 20px;
  border-radius: 5%;
}
.img {
  width: 280px;
  height: 150px;
  border-radius: 5%;
  transition: 1s;
}
.img:hover {
  transform: scale(0.9);
  cursor: pointer;
}
.wyProDiv {
  height: 750px;
}
.flex-grow {
  flex-grow: 1;
}
.elMenu {
  margin-left: 25px;
  width: 920px;
}

.rankDiv {
  height: 700px;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: orange;
  cursor: pointer;
}
</style>
